<template>
  <div id="warn-warp">
    <v-header title="预警显示" :showDownloadBtn="false" :saveShow="false"></v-header>
    <div class="warn-dis">
      <div class="warn">
        <div>
          <el-table
            :data="tableData"
            border
            >
            <el-table-column
              prop="type"
              label="预警指标类型"
            >
            </el-table-column>
            <el-table-column
              prop="value"
              label="值(指标超过阈值的用户数)"
            >
            </el-table-column>
            <el-table-column
              prop="preTime"
              label="上次预警时间"
            >
            </el-table-column>
            <el-table-column
              prop="isInfo"
              label="是否通知">
              <template slot-scope="scope">
                <div>
                  <el-radio v-model="scope.row.radio" label="1">是</el-radio>
                  <el-radio v-model="scope.row.radio" label="2">否</el-radio>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="paging">
          <div class="page">
            <div class="block">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :total="10">
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  import {VHeader} from '../../../../components'
  export default {
    components: {
      VHeader
    },
    data () {
      return {
        radio: '1',
        tableData: [
          {
            type: 'DAU预警',
            value: '68',
            preTime: '2018-02-18',
            radio: '1'
          },
          {
            type: '羊毛党风险预警',
            value: '45',
            preTime: '2018-05-12',
            radio: '1'
          },
          {
            type: '当日复投',
            value: '78',
            preTime: '2018-02-04',
            radio: '1'
          },
          {
            type: '投资流失',
            value: '681',
            preTime: '2018-03-24',
            radio: '2'
          },
          {
            type: '大额交易',
            value: '345',
            preTime: '2018-05-02',
            radio: '2'
          },
          {
            type: '频繁转账',
            value: '245',
            preTime: '2018-03-26',
            radio: '2'
          },
          {
            type: '跨境交易频繁',
            value: '224',
            preTime: '2018-04-02',
            radio: '1'
          }
        ],
        currentPage4: 1 // number类型
      }
    },
    methods: {
      handleSizeChange (val) {

      },
      handleCurrentChange (val) {

      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  #warn-warp
    height 100%
    .warn-dis
      height calc(100% - 56px)
      padding 10px 0 20px 10px
      .warn
        height 100%
        overflow auto
        .el-table-column
          min-width 420px
        .paging
          background-color #fff
          width 100%
          height 60px
          padding 20px 0 10px 0
        .page
          width 40%
          height 40px
          float left
</style>
